<template>
  <view class="approval-timeline">
    <view v-for="(item, index) in historyList" :key="index" class="timeline-item">
      <!-- 左侧 时间线 -->
      <view class="timeline-left">
        <view class="dot" :class="item.state === 1 ? 'dot-pass' : item.state === 0 ? 'dot-reject' : 'dot-pending'"></view>
        <view v-if="index !== historyList.length - 1" class="line"></view>
      </view>

      <!-- 右侧 卡片内容 -->
      <view class="timeline-right">
        <view class="content-card">
          <view class="content-header">
            <text class="approver">{{ item.approveuser }}</text>
            <text class="status" :class="item.state === 1 ? 'pass' : item.state === 0 ? 'reject' : 'pending'">
              {{ item.status }}
            </text>
          </view>
          <view class="approval-time">{{ dayjs(item.approvetime).format("YYYY-MM-DD HH:mm") }}</view>
          <view class="approval-comment">{{ item.remarks }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from "dayjs/esm/index";

export default {
  data() {
    return {
      id:"",
      historyList: []
    };
  },
  onLoad: function (option) {
    this.id = option.id;
    this.getHistoryList();
  },
  methods: {
    dayjs,
    getHistoryList() {
      this.$commonUnits.postRequest('sbby.maintenancemobilebiz.getApproveHistoryListById.mobile', {id: this.id}).then(item => {
        this.historyList = item.res;
      })
    },
  }
};
</script>

<style scoped>
.approval-timeline {
  padding: 20rpx;
}

.timeline-item {
  display: flex;
  flex-direction: row;
  position: relative;
}

/* 左侧：时间轴部分 */
.timeline-left {
  width: 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #ccc;
  z-index: 2;
}

.dot-pass {
  background-color: #4caf50;
}

.dot-reject {
  background-color: #f44336;
}

.dot-pending {
  background-color: #ff9800;
}

.line {
  width: 4rpx;
  flex-grow: 1;
  background-color: #ddd;
  z-index: 1;
}

/* 右侧：审批信息部分 */
.timeline-right {
  flex: 1;
  padding-left: 20rpx;
  padding-bottom: 20rpx;
}

.content-card {
  background: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.approver {
  font-weight: bold;
  font-size: 32rpx;
}

.status {
  font-size: 28rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.pass {
  color: #4caf50;
  background-color: #e8f5e9;
}

.reject {
  color: #f44336;
  background-color: #ffebee;
}

.pending {
  color: #ff9800;
  background-color: #fff3e0;
}

.approval-time {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 8rpx;
}

.approval-comment {
  font-size: 28rpx;
  color: #333;
}
</style>
